import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { theme } from "../../../constants/theme"
import { BookOpen, CheckCircle2 } from "lucide-react-native"

interface PlanBookCardProps {
    book: {
        id: string
        title: string
        coverColor: string
        totalWords: number
        learnedWords: number
        status: "learning" | "completed" | "paused"
    }
    onPress: (bookId: string) => void
}

export default function PlanBookCard({ book, onPress }: PlanBookCardProps) {
    const progressPercent = Math.round((book.learnedWords / book.totalWords) * 100) || 0

    // 获取状态标签颜色
    const getStatusColor = (status: string) => {
        switch (status) {
            case "learning":
                return theme.colors.secondary.green.default
            case "completed":
                return theme.colors.primary.default
            case "paused":
                return theme.colors.secondary.orange.default
            default:
                return theme.colors.neutral.gray
        }
    }

    // 获取状态标签文字
    const getStatusText = (status: string) => {
        switch (status) {
            case "learning":
                return "正在学习"
            case "completed":
                return "已完成"
            case "paused":
                return "已暂停"
            default:
                return "未开始"
        }
    }

    // 获取状态图标
    const getStatusIcon = (status: string) => {
        switch (status) {
            case "completed":
                return <CheckCircle2 size={16} color={theme.colors.primary.default} />
            default:
                return <BookOpen size={16} color={getStatusColor(status)} />
        }
    }

    return (
        <TouchableOpacity style={styles.bookCard} onPress={() => onPress(book.id)}>
            <View style={styles.bookCardContent}>
                {/* 左侧状态和标题 */}
                <View style={styles.leftSection}>
                    <View style={[styles.statusIndicator, { backgroundColor: getStatusColor(book.status) }]}>
                        {getStatusIcon(book.status)}
                    </View>
                    <View style={styles.titleSection}>
                        <Text style={styles.bookTitle}>{book.title}</Text>
                        <View style={styles.progressTextContainer}>
                            <Text style={styles.progressText}>
                                已学习 {book.learnedWords}/{book.totalWords} 词
                            </Text>
                        </View>
                    </View>
                </View>

                {/* 右侧进度环 */}
                <View style={styles.rightSection}>
                    <View style={styles.progressRingContainer}>
                        <View style={styles.progressRing}>
                            <View style={styles.progressRingInner}>
                                <Text style={styles.progressPercentText}>{progressPercent}%</Text>
                            </View>
                        </View>
                    </View>
                    <View style={[styles.statusBadge, { backgroundColor: `${getStatusColor(book.status)}15` }]}>
                        <Text style={[styles.statusText, { color: getStatusColor(book.status) }]}>
                            {getStatusText(book.status)}
                        </Text>
                    </View>
                </View>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    bookCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.transparent.black.light,
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.1,
                shadowRadius: 8,
            },
            android: {
                elevation: 2,
            },
        }),
        overflow: "hidden",
    },
    bookCardContent: {
        flexDirection: "row",
        padding: theme.spacing.lg,
        justifyContent: "space-between",
    },
    leftSection: {
        flexDirection: "row",
        alignItems: "center",
        flex: 1,
    },
    statusIndicator: {
        width: 36,
        height: 36,
        borderRadius: 18,
        justifyContent: "center",
        alignItems: "center",
        marginRight: theme.spacing.md,
    },
    titleSection: {
        flex: 1,
    },
    bookTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.xs,
    },
    progressTextContainer: {
        flexDirection: "row",
        alignItems: "center",
    },
    progressText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    rightSection: {
        alignItems: "flex-end",
        justifyContent: "space-between",
        height: "100%",
    },
    progressRingContainer: {
        marginBottom: theme.spacing.sm,
    },
    progressRing: {
        width: 50,
        height: 50,
        borderRadius: 25,
        borderWidth: 3,
        borderColor: theme.colors.primary.light,
        justifyContent: "center",
        alignItems: "center",
        padding: 2,
    },
    progressRingInner: {
        width: "100%",
        height: "100%",
        borderRadius: 25,
        backgroundColor: theme.colors.neutral.background,
        justifyContent: "center",
        alignItems: "center",
    },
    progressPercentText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    statusBadge: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.full,
    },
    statusText: {
        fontSize: theme.fontSize.xs,
        fontWeight: theme.fontWeight.medium,
    },
})

